<template>
  <div class="list">
    <Table border ref="selection" :columns="columns" :data="waters">
      <template #ctime="{ row }">
        {{ formartTime(row.create_date) }}
      </template>
      <template #pdate="{ row }">
        {{ formartTime(row.pay_date) }}
      </template>
      <template #status="{ row }">
        {{ row.status == 0 ? "未支付" : "已支付" }}
      </template>
      <template #total_fee="{ row }">
        {{ formartNumber(row.total_fee) }}
      </template>
      <template #provider="{ row }">
        {{ row.provider == "wxpay" ? "微信支付" : "其他" }}
      </template>
      <template #refund_count="{ row }">
        {{ row.refund_count > 0 ? "已退费" : "未退费" }}
      </template>
      <template #refund_fee="{ row }">
        {{ formartNumber(row.refund_fee) }}
      </template>
    </Table>
  </div>
</template>

<script>
import { list } from "@/api/fund";
import moment from "moment";
export default {
  name: "PayOrderList",
  computed: {
    formartTime() {
      return function (val) {
        let date = new Date(val);
        return moment(date).format("YYYY-MM-DD H:mm:s");
      };
    },
    formartNumber() {
      return function (val) {
        return (val / 100).toFixed(2);
      };
    },
  },
  data() {
    return {
      columns: [
        {
          title: "IP",
          key: "client_ip",
          width: "180px",
        },
        {
          title: "订单号",
          width: "220px",
          key: "order_no",
        },
        {
          title: "订单创建时间",
          slot: "ctime",
          width: "180px",
          key: "create_date",
        },
        {
          title: "流水号",
          key: "out_trade_no",
          width: "240px",
        },
        {
          title: "完成支付时间",
          slot: "pdate",
          width: "180px",
          key: "pay_date",
        },
        {
          title: "支付状态",
          key: "status",
          slot: "status",
        },
        {
          title: "支付金额",
          key: "total_fee",
          slot: "total_fee",
        },
        {
          title: "支付方式",
          key: "provider",
          slot: "provider",
        },
        {
          title: "退费",
          key: "refund_count",
          slot: "refund_count",
        },
        {
          title: "退费金额",
          key: "refund_fee",
          slot: "refund_fee",
        },
      ],
      waters: [],
    };
  },
  created() {
    list().then((res) => {
      this.waters = res.data.data;
    });
  },
};
</script>

<style scoped>
.list {
  width: 100%;
  margin: 0 10px;
  padding: 10px;
  background: #fff;
  margin-top: 50px;
}
</style>